<template>
  <div class="content">
    <img class="content_background" :src="contentBackground" alt="">
    <!--    顶部返回按钮-->
    <div class="head_return" @click="headReturn">

    </div>
    <div class="read_frame">
      <div class="background_box"
           v-if="blinkflag"
           :class="{blinkAnmition:blinkflag}"
      >
        <img src="../../assets/image/lesson/lesbox.png" alt="">
      </div>
      <div class="read_frame_tit"
           :class="{titAnmition:textShowflag}"
           v-if="textShowflag">
        <img :src="contentTit" alt="">
      </div>

      <div class="frame_center"
           v-if="textShowflag"
           :class="{hidetxtAnmition:textShowflag}"
      >
        <div class="topic_con_scroll"
             :class="{hidescroll:false}"
        >
          <div class="frame_item" v-for="item in frameList" :key="item.tit">
            <div class="item_t">
              <img src="../../assets/image/lesson/logo@2x.png" alt="">
              <span>{{ item.tit }}</span>
            </div>
            <div class="item_c">
              {{ item.content }}
            </div>
          </div>
        </div>

      </div>

    </div>
    <!--      进入测试按钮-->
    <div class="lesson_button" v-if="buttonflag"
         :class="{buttonAnmition:buttonflag}"
         @click="goDetail"></div>
    <!--    进入页面遮罩层动画-->
    <div class="load_page" v-show="showLoadPage">
      <img class="palm_img" src="../../assets/image/lesson/palm.png" alt="">
      <div class="load_tips" @click="showLoadPage = false">
        <img src="../../assets/image/lesson/loadtips1.png" alt="">
        <img src="../../assets/image/lesson/loadtips2.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>

	export default {
		name: 'floor',
		data() {
			return {
				contentBackground:'',
				contentTit:'',
				height: 0,
				id: '',
				type:null,
				frameList: [{
						tit: '训练目标',
						content: '提高边记忆边加工的能力，提升阅读中的记忆容量，养成“边读，边记，边理解”的良好的阅读思维习惯。训练的达标标准为二年级为两组（一组二句，本单元共90组），三年级为三组，四年级为四组，五六年级为六组。'
					},
					{
						tit: '课时安排',
						content: '提高边记忆边加工的能力，提升阅读中的记忆容量，养成“边读，边记，边理解”的良好的阅读思维习惯。 '
					},
					{
						tit: '答题时长',
						content: '提高边记忆边加工的能力，提升阅读中的记忆容量， '
					}
				],
				// 是否展示遮罩层
				showLoadPage: false,
				blinkflag:false,   //背景闪烁
				scrollflag:false,//是否有滚动条
				textShowflag:false, //文字的显示
				buttonflag:false,   //提交按钮的显示
				//readspan:阅读广度；wordlogic：词语逻辑；visualmemory：视觉记忆；
				//quantityliteracy：识字量；longsentence：长句理解；
				//readactual：阅读实战；recapitulate：概括力 scene: 情景再现
				typeArray:['','readspan','wordlogic','visualmemory', 'scene']
			}
		},
		mounted() {
			setTimeout(() => {
				// this.$emit("closeloading");
				// 开启遮罩层动画
				// this.showLoadPage = true
			}, 1000)
			this.type = this.$route.query.class

			this.renderAnimation()
			this.renderpage(this.type)
		},
		methods: {
			renderAnimation(){
				let n=-3
				setInterval(()=>{
					n+=0.5
					if(n==0.5){
						this.blinkflag=true
					}
					if(n==1.5){
						this.textShowflag=true
					}
					if(n==2.5){
						this.buttonflag=true
					}
					if(n==3.5){
						this.showLoadPage=true
					}
				},500)
			},
			// 返回上一页
			headReturn() {
				this.$router.go(-1)
			},
			goDetail() {
				var type=this.type
				this.$router.push({'path': '/lessonTest',query:{class:type}})

				// this.$emit("showloading", {
				// 	methods: 'push',
				// 	path: '/lessonTest',
				// 	query: {
				// 		class:type
				// 	}
				// })
				// if ((this.id + 1) % 2 == 0) {
				//   this.$router.push({'path': '/lessonDetail/lessonRemberSubject'})
				// } else if ((this.id + 1) % 3 == 0) {
				//   this.$router.push({'path': '/lessonDetail/lessonKnowSubject'})
				// } else {
				//   this.$router.push({'path': '/lessonDetail/lessonSubject'})
				// }
			},
			renderpage(n) {
				var str=""
				console.log(n)
				console.log(this.$imgData[n])
				console.log(this.$imgData['readspan'])
				this.contentBackground=this.$imgData[n].contentBackground
				this.contentTit=this.$imgData[n].contentTit
				// //根据题型获取不同显示图片,不同的考试配置
				// if(n=="readspan"){
				// 	//阅读广度
				// 	this.contentBackground=contentBackground1
				// 	this.contentTit=contentTit1
				// }else if(n=="wordlogic"){
				// 	//概括力
				// 	this.contentBackground=contentBackground2
				// 	this.contentTit=contentTit2
				// }else if(n=="readactual"){
				// 	//概括力
				// 	this.contentBackground=contentBackground3
				// 	this.contentTit=contentTit3
				// }else if(n=="scene"){
				// 	//概括力
				// 	this.contentBackground=contentBackground15
				// 	this.contentTit=contentTit15
				// }else if(n=="quantityliteracy"){
				// 	//识字量
				// 	this.contentBackground=contentBackground4
				// 	this.contentTit=contentTit4
				// }
				//获取配置
				str=n
				this.$request.get("getTestConfig/"+str, {}).then((res) => {
					this.frameList[0].content = res.data.data.training
					this.frameList[1].content = res.data.data.arrange
					this.frameList[2].content = res.data.data.answer_time + '分钟'
				}).catch((err) => {
					// this.$message({
					//           message: '警告哦，这是一条警告消息',
					//           type: 'warning'
					//         });
				})
			}
		},


		watch: {}
	}
</script>
<style lang="less">
.content {
  height: 100vh;
  position: relative;
  // background: url("../../assets/image/lesson/lesback.png") no-repeat;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  font-size: .24rem;
  color: #fff;
  box-sizing: border-box;
  // padding: 0.53rem 0.76rem 0 0.87rem;
  overflow: hidden;

  .content_background {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    // z-index: -1;
  }

  .head_return {
    position: absolute;
    z-index: 10;
    top: 0.3rem;
    left: 0.4rem;
    width: 0.7rem;
    height: 0.7rem;
    background: url("../../assets/image/lesson/return.png") no-repeat;
    background-size: 100% 100%;
    cursor: pointer;

    & > img {
      width: 100%;
      height: 100%;
    }
  }

  .read_frame {
    position: relative;
    margin: 1.5rem auto 0 auto;
    padding: 1rem 0.88rem;
    width: 10.26rem;
    height: 6.74rem;
    // background: url("../../assets/image/lesson/lesbox.png") no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;

    .background_box {

      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;

      & > img {
        width: 100%;
        height: 100%;
      }
    }

    .read_frame_tit {
      position: absolute;
      top: -0.2rem;
      left: 50.3%;
      transform: translateX(-50%);
      width: 2.99rem;
      height: 0.87rem;
      background-size: 100% 100%;

      & > img {
        width: 100%;
        height: 100%;
      }
    }

    .frame_center {
      // height: 5.5rem;
      position: relative;
      overflow: hidden;
      z-index: 2;

      .topic_con_scroll {
        height: 100%;

        //火狐浏览器隐藏滚动条
        & {
          scrollbar-color: #9eb0e6 #5b6fcf;
          scrollbar-width: thin;
          scrollbar-track-color: transparent;
          -ms-scrollbar-track-color: transparent;
        }

        /* 设置滚动条的样式 谷歌  */

        &::-webkit-scrollbar {
          width: 12px;
        }

        /* 滚动槽 */

        &::-webkit-scrollbar-track {
          -webkit-box-shadow: inset006pxrgba(223, 224, 229);
          border-radius: 10px;
        }

        /* 滚动条滑块 */

        &::-webkit-scrollbar-thumb {
          border-radius: 10px;
          background: rgba(158, 176, 230);
          -webkit-box-shadow: inset006pxrgba(158, 176, 230);
        }

        &::-webkit-scrollbar-thumb:window-inactive {
          background: rgba(229, 226, 217);
        }

        .frame_item {
          margin-top: 1em;
          width: 100%;
          min-height: 1.4rem;

          .item_t {
            display: flex;
            line-height: 0.58rem;

            & > img {
              width: 0.7rem;
              height: 0.58rem;
            }

            & > span {
              font-size: .21rem;
              margin-left: -1.2em;
            }
          }

          .item_c {
            padding: 0 .3rem;
            font-size: 0.18rem;
            line-height: .34rem;
          }
        }
      }

      .hidescroll {
        overflow-y: scroll;
      }
    }


  }

  .lesson_button {
    position: relative;
    margin: 0 auto;
    margin-top: 0.14rem;
    width: 1.93rem;
    height: 0.76rem;
    cursor: pointer;
    background: url("../../assets/image/lesson/test.png") no-repeat;
    background-size: 100% 100%;
  }

  // 加载动画
  .load_page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, .6);
    z-index: 100;

    .palm_img {
      position: absolute;
      top: 0.6rem;
      left: 0.8rem;
      z-index: 11;
      animation: palm 1s infinite;
    }

    .load_tips {
      position: absolute;
      left: 0.8rem;
      top: 1.6rem;
      width: 2rem;
      height: 1rem;

      & > span {
        font-size: 20px;
      }
    }
  }

  @keyframes palm {
    0% {
      transform: translate(0);
    }

    50% {
      transform: translate(.2rem, .2rem);
    }

    100% {
      transform: translate(0);
    }
  }

  @-moz-keyframes palm

    /* Firefox */ {
    0% {
      transform: translate(0);
    }

    50% {
      transform: translate(.2rem, .2rem);
    }

    100% {
      transform: translate(0);
    }
  }

  @-webkit-keyframes palm

    /* Safari 和 Chrome */ {
    0% {
      transform: translate(0);
    }

    50% {
      transform: translate(.2rem, .2rem);
    }

    100% {
      transform: translate(0);
    }
  }

  @-o-keyframes palm

    /* Opera */ {
    0% {
      transform: translate(0);
    }

    50% {
      transform: translate(.2rem, .2rem);
    }

    100% {
      transform: translate(0);
    }
  }
}

.blinkAnmition {
  animation-name: boxblink;
  animation-duration: 1s;
  animation-iteration-count: 2;
}

.hidetxtAnmition {
  animation-name: hidetxt;
  animation-duration: 2s;
  // animation-fill-mode : forwards;
  // animation-iteration-count:3;
}

.titAnmition {
  animation-name: showtit;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  // animation-iteration-count:3;
}

.buttonAnmition {
  animation-name: boxblink;
  animation-duration: 1s;
}

//隐藏
@keyframes boxblink {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

//渐现
@keyframes showtit {
  0% {
    top: 0;
    opacity: 0;

  }

  100% {
    top: -0.3rem;
    opacity: 1;
    z-index: 3;
  }
}

//隐藏文字
@keyframes hidetxt {
  0% {
    height: 0;
  }


  100% {
    height: 100%;
  }
}

</style>
